import React, { useRef, useState, useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'umi'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Form, Row, Col, Input, Select, Button, Divider, message, Table } from 'antd';
import { useIntl } from 'umi';
const intl = useIntl();
function Index(props) {
  const dispatch = useDispatch()
  const form = useRef();
  const {
    wantbuyList,
    pageSize,
    page,
    total,
    lastPage
  } = useSelector(({ wantbuy }) => {
    return {
      wantbuyList: wantbuy.wantbuyList,
      pageSize: wantbuy.pageSize,
      page: wantbuy.page,
      total: wantbuy.total,
      lastPage: wantbuy.lastPage
    }
  })
  const [search, setSearch] = useState()




  useEffect(() => {
    dispatch({
      type: 'wantbuy/apiGetWantbuyList',
      payload: {
        pageSize: pageSize && pageSize || 10,
        page: page && page || 1
      }
    })
  }, [])
  const handelFormSubmit = (value) => {
    // console.log(value);
    // alert('value')
    dispatch({ type: 'wantbuy/apiGetWantbuyList', payload: { pageSize, page, ...value } });
    setSearch(value);
  };
  const resetForm = () => {
    form.current.resetFields;
    dispatch({ type: 'wantbuy/apiGetWantbuyList' });
    setSearch(null);
  };
  const formItemLayer = {
    labelCol: {
      xxl: { span: 6 },
      xl: { span: 6 },
    },
    wrapperCol: {
      xxl: { span: 15 },
      xl: { span: 15 },
    },
  };

  const columns = [
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title:intl.formatMessage({ id: 'COMPANY_NAME' }),
      dataIndex: 'exhibitorName',
    },
    {
      title:intl.formatMessage({ id: 'Enquiries_are_people' }),
      dataIndex: 'wantPerson',
    },
    {
      title:intl.formatMessage({ id: 'Phone' }),
      dataIndex: 'wantPhone',
    },
    {
      title:intl.formatMessage({ id: 'INQUIRY_COMPANY' }),
      dataIndex: 'wantCompany'
    },
    {
      title:intl.formatMessage({ id: '_PRODUCT_NAME' }),
      dataIndex: 'productName'
    },
    {
      title:intl.formatMessage({ id: 'DESCRIPTION' }),
      dataIndex: 'description'
    },
    {
      title:intl.formatMessage({ id: 'INQUIRIES' }),
      dataIndex: 'quantity'
    },
  ];

  const pagination = {
    defaultCurrent: 6,
    pageSize: pageSize && pageSize || 10,
    total: total,
    current: page && page,
    onChange: (page, pageSize) => {
      dispatch({
        type: 'wantbuy/apiGetWantbuyList',
        payload: {
          pageSize: pageSize,
          page: page
        }
      })
    }
  }
  console.log(wantbuyList, 'wantbuyList')
  return (
    <PageHeaderWrapper>
      <Form ref={form} onFinish={handelFormSubmit} style={{ marginTop: 24, marginBottom: 38 }}>
        <Row>
          <Col xxl={6} xl={8}>
            <Form.Item label="展商名称" name="exhibitorName" {...formItemLayer}>
              <Input allowClear placeholder="请输入公司名称" />
            </Form.Item>
          </Col>
          <Col xxl={6} xl={8}>
            <Form.Item label="商品名称" name="productName" {...formItemLayer}>
              <Input allowClear placeholder="请输入手机号" />
            </Form.Item>
          </Col>
          <Col xxl={6} xl={8}>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                查询
                </Button>
              <Button style={{ marginLeft: 18 }} onClick={resetForm}>
                重置
                </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <Card style={{ marginBottom: 12, minHeight: '80vh', width: '100%' }}>
        <Table
          columns={columns}
          dataSource={wantbuyList}
          rowKey="id"
          scroll={{ x: 1500 }}
          pagination={pagination}
        />
      </Card>
    </PageHeaderWrapper>
  )
}

export default Index
